﻿<style>
	.page-icon [class^=icon-]{
		font-size: .4rem;
	}
</style>
<div class="bui-page page-icon">
	<header class="bui-bar">
		<div class="bui-bar-left">
			<a class="bui-btn btn-back"><i class="icon-back"></i></a>
		
		</div>
		<div class="bui-bar-main">图标</div>
		<div class="bui-bar-right">
		</div>
	</header>
	<main>
		<div class="section-title">图标布局</div>
		<!-- 四列布局 -->
		<ul class="bui-nav-icon bui-fluid-4">
		    <li class="bui-btn">
		        <i class="icon-doubt primary"><span class="bui-badges">5</span></i>
		        <div class="span1">线条图标</div>
		    </li>
		    <li class="bui-btn">
		        <i class="icon-chat success"></i>
		        <div class="span1">线条图标</div>
		    </li>
		    <li class="bui-btn">
		        <i class="icon-shoppingcart warning"></i>
		        <div class="span1">线条图标</div>
		    </li>
		    <li class="bui-btn">
		        <i class="icon-fav danger"></i>
		        <div class="span1">线条图标</div>
		    </li>
		    <li class="bui-btn">
		        <i class="icon-doubtfill primary"></i>
		        <div class="span1">图标背景</div>
		    </li>
		    <li class="bui-btn">
		        <i class="icon-chatfill success"></i>
		        <div class="span1">图标背景</div>
		    </li>
		    <li class="bui-btn">
		        <i class="icon-shoppingcartfill warning"></i>
		        <div class="span1">图标背景</div>
		    </li>
		    <li class="bui-btn">
		        <i class="icon-favfill danger"></i>
		        <div class="span1">图标背景</div>
		    </li>
		    <li class="bui-btn">
		        <div class="bui-icon primary"><i class="icon-success"><span class="bui-badges">5</span></i></div>
		        <div class="span1">大圆图标</div>
		    </li>
		    <li class="bui-btn">
		        <div class="bui-icon success"><i class="icon-error"></i></div>
		        <div class="span1">大圆图标</div>
		    </li>
		    <li class="bui-btn">
		        <div class="bui-icon warning"><i class="icon-info"></i></div>
		        <div class="span1">大圆图标</div>
		    </li>
		    <li class="bui-btn">
		        <div class="bui-icon danger"><i class="icon-shoppingcart"></i></div>
		        <div class="span1">大圆图标</div>
		    </li>
		    <li class="bui-btn">
		        <div class="bui-icon primary round"><i class="icon-success"><span class="bui-badges">15</span></i></div>
		        <div class="span1">小圆图标</div>
		    </li>
		    <li class="bui-btn">
		        <div class="bui-icon success round"><i class="icon-error"></i></div>
		        <div class="span1">小圆图标</div>
		    </li>
		    <li class="bui-btn">
		        <div class="bui-icon warning round"><i class="icon-info"></i></div>
		        <div class="span1">小圆图标</div>
		    </li>
		    <li class="bui-btn">
		        <div class="bui-icon danger round"><i class="icon-shoppingcart"></i></div>
		        <div class="span1">小圆图标</div>
		    </li>
		    <li class="bui-btn">
		        <div class="icon"><img src="images/icon-pyq.png" alt=""><span class="bui-badges">5</span></div>
		        <div class="span1">图片导航</div>
		    </li>
		    <li class="bui-btn">
		        <div class="icon"><img src="images/icon-weibo.png" alt=""></div>
		        <div class="span1">图片导航</div>
		    </li>
		    <li class="bui-btn">
		        <div class="icon"><img src="images/icon-qq.png" alt=""></div>
		        <div class="span1">图片导航</div>
		    </li>
		    <li class="bui-btn">
		        <div class="icon"><img src="images/icon-weixin.png" alt=""></div>
		        <div class="span1">图片导航</div>
		    </li>
		</ul>
		<div class="section-title">更多字体图标</div>
		<div class="container-x">
			<div class="bui-btn round" href="http://www.easybui.com/demo/font/demo.html" target="_blank">所有图标编码</div> 
		</div>

		<div class="section-title">背景+图标</div>
		<div class="container-x">
			<div class="bui-icon primary">
				<i class="icon-success"></i>
			</div>
		</div>
		<div class="section-title">背景+圆角+图标</div>
		<div class="container-x">
			<div class="bui-icon primary round">
				<i class="icon-success"></i>
			</div>
		</div>
		<div class="section-title">颜色配置</div>
		<div class="container-x">
			<i class="icon-success"></i>
			<i class="icon-success default"></i>
			<i class="icon-success success"></i>
			<i class="icon-error danger"></i>
			<i class="icon-warning warning"></i>
			<i class="icon-info primary"></i>
		</div>
		<div class="section-title">大小配置</div>
		<div class="container-x">
			<i class="icon-successfill mini"></i>
			<i class="icon-successfill small"></i>
			<i class="icon-successfill large"></i>
			<i class="icon-successfill xlarge"></i>
			<i class="icon-successfill xxlarge"></i>
		</div>
		<div class="bui-fluid-space-1">
			<div class="span1">
				成功 
				<i class="icon-success">icon-success</i>
				<i class="icon-successfill">icon-successfill</i>
			</div>
			<div class="span1">
				出错 
				<i class="icon-error">icon-error</i>
				<i class="icon-errorfill">icon-errorfill</i>
			</div>
			<div class="span1">
				警告 
				<i class="icon-warning">icon-warning</i>
				<i class="icon-warningfill">icon-warningfill</i>
			</div>
			<div class="span1">
				提醒 
				<i class="icon-info">icon-info</i>
				<i class="icon-infofill">icon-infofill</i>
			</div>
			<div class="span1">
				疑问 
				<i class="icon-doubt">icon-doubt</i>
				<i class="icon-doubtfill">icon-doubtfill</i>
			</div>
			<div class="span1">
				聊天 
				<i class="icon-chat">icon-chat</i>
				<i class="icon-chatfill">icon-chatfill</i>
			</div>
			<div class="span1">
				购物车 
				<i class="icon-shoppingcart">icon-shoppingcart</i>
				<i class="icon-shoppingcartfill">icon-shoppingcartfill</i>
			</div>
			<div class="span1">
				评论 
				<i class="icon-comment">icon-comment</i>
				<i class="icon-commentfill">icon-commentfill</i>
			</div>
			<div class="span1">
				时间 
				<i class="icon-time">icon-time</i>
				<i class="icon-timefill">icon-timefill</i>
			</div>
			<div class="span1">
				头像 
				<i class="icon-face">icon-face</i>
				<i class="icon-facefill">icon-facefill</i>
			</div>
			<div class="span1">
				收藏 
				<i class="icon-fav">icon-fav</i>
				<i class="icon-favfill">icon-favfill</i>
			</div>
			<div class="span1">
				删除 
				<i class="icon-remove">icon-remove</i>
				<i class="icon-removefill">icon-removefill</i>
			</div>
			<div class="span1">
				后退 
				<i class="icon-back">icon-back</i>
			</div>
			<div class="span1">
				前进 
				<i class="icon-next"></i>icon-next
			</div>
			<div class="span1">
				选中 
				<i class="icon-check">icon-check</i>
			</div>
			<div class="span1">
				关闭 
				<i class="icon-close">icon-close</i>
			</div>
			<div class="span1">
				上边 
				<i class="icon-listup">icon-listup</i>
			</div>
			<div class="span1">
				下边 
				<i class="icon-listdown">icon-listdown</i>
			</div>
			<div class="span1">
				左边 
				<i class="icon-listleft">icon-listleft</i>
			</div>
			<div class="span1">
				右边 
				<i class="icon-listright">icon-listright</i>
			</div>
			<div class="span1">
				增加 
				<i class="icon-plus">icon-plus</i>
			</div>
			<div class="span1">
				减少 
				<i class="icon-minus">icon-minus</i>
			</div>
			<div class="span1">
				安全 
				<i class="icon-safe">icon-safe</i>
			</div>
			<div class="span1">
				菜单 
				<i class="icon-menu">icon-menu</i>
			</div>
			<div class="span1">
				设置 
				<i class="icon-setting">icon-setting</i>
			</div>
			<div class="span1">
				首页 
				<i class="icon-home">icon-home</i>
			</div>
			<div class="span1">
				刷新 
				<i class="icon-refresh">icon-refresh</i>
			</div>
			<div class="span1">
				分享 
				<i class="icon-share">icon-share</i>
			</div>
			<div class="span1">
				撤销 
				<i class="icon-fallback">icon-fallback</i>
			</div>
			<div class="span1">
				图片 
				<i class="icon-pic">icon-pic</i>
			</div>
			<div class="span1">
				更多 
				<i class="icon-more">icon-more</i>
			</div>
			<div class="span1">
				更多 
				<i class="icon-more2">icon-more2</i>
			</div>
			<div class="span1">
				用户 
				<i class="icon-user">icon-user</i>
			</div>
			<div class="span1">
				密码 
				<i class="icon-lock">icon-lock</i>
			</div>
			<div class="span1">
				解锁 
				<i class="icon-unlock">icon-unlock</i>
			</div>
			<div class="span1">
				扫码 
				<i class="icon-scan">icon-scan</i>
			</div>
			<div class="span1">
				电话 
				<i class="icon-tel">icon-tel</i>
			</div>
			<div class="span1">
				二维码 
				<i class="icon-ecode">icon-ecode</i>
			</div>
			<div class="span1">
				提醒 
				<i class="icon-alert">icon-alert</i>
			</div>
			<div class="span1">
				地址簿 
				<i class="icon-addressbook">icon-addressbook</i>
			</div>
			<div class="span1">
				身份 
				<i class="icon-userinfo">icon-userinfo</i>
			</div>
			<div class="span1">
				闹钟 
				<i class="icon-clock">icon-clock</i>
			</div>
			<div class="span1">
				编辑 
				<i class="icon-edit">icon-edit</i>
			</div>

		</div>
	</main>
</div>
